<template>
	<view style="width: 100vw;min-height: 100vh;padding: 20rpx;">
		<view class="" style="margin-bottom: 20rpx;">
			<view class="" style="font-weight: 600;padding: 20rpx;font-size: 38rpx;">
				交易成功
			</view>
			<view class="">
				<fui-steps size="24" :items="items" :current="current"></fui-steps>
			</view>
		</view>
		<view class="goods">
			<view class="goodsBox" @click="toGoodsDetails">
				<view class="flex">
					<view class="imgBox">
						<image src="../../static/test/userheader.jpg" mode="aspectFill"></image>
					</view>
					<view class="copywriting">
						啊收到了喀什觉得按时打卡是打开奥斯卡德拉克斯觉得啊啊啊啊啊
					</view>
					<view class="" style="color: #C4516E;width: 20%;">
						<text style="font-size:26rpx ;">￥</text><text>1</text>
					</view>
				</view>
			</view>
			<view class="price">
				<view class="flex-js">
					<view class="">
						成交价格
					</view>
					<view class="">
						￥10.00
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						商品总价
					</view>
					<view class="">
						￥10.00
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						运费
					</view>
					<view class="">
						￥0.00
					</view>
				</view>
			</view>
			<view class="" style="padding: 20rpx 0rpx;font-size: 28rpx;line-height: 45rpx;">
				<view class="flex-js">
					<view class="">
						订单编号
					</view>
					<view class="">
						33587485554693543285
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						收货地址
					</view>
					<view class="">
						宋佳伟 河北省保定市清苑区
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						卖家昵称
					</view>
					<view class="">
						哈哈哈
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						下单时间
					</view>
					<view class="">
						2024/10/18
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						发货时间
					</view>
					<view class="">
						2024/10/18
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						成交时间
					</view>
					<view class="">
						2024/10/20
					</view>
				</view>
			</view>
		</view>
		<view class="buyBox" :style="{'bottom':bottomHight+'rpx'}">
			<view class="money flex">
				<view class="btnBox">
					联系卖家
				</view>
				<view class="btnBox">
					删除订单
				</view>
				<view class="btnBox">
					再次购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: [{
					title: '已拍下'
				}, {
					title: '已付款'
				}, {
					title: '已发货'
				}, {
					title: '交易成功'
				}],
				bottomHight: 0,
			};
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.bottomHight = app.safeAreaInsets.bottom
			console.log('app', app);
		},
		methods: {
			toGoodsDetails() {
				uni.navigateTo({
					url: '/publicPages/goods/details'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.price {
		line-height: 50rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #F8F8F8;
		font-size: 28rpx;
	}


	.copywriting {
		font-size: 26rpx;
		padding: 0rpx 20rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;

		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
	}

	.btnBox {
		font-size: 30rpx;
		margin-left: 20rpx;
		background-color: #F8F8F8;
		padding: 8rpx 25rpx;
		border-radius: 20rpx;
	}

	.goodsBox {
		margin-bottom: 20rpx;
		width: 100%;
	}

	.goods {
		border-radius: 25rpx;
		background-color: white;
		padding: 20rpx;
		width: 100%;
	}

	.imgBox {
		width: 150rpx;
		border-radius: 25rpx;

		image {
			border-radius: 25rpx;
			width: 150rpx;
			height: 150rpx;
		}
	}

	.money {
		justify-content: flex-end;
	}

	.buyBox {
		background-color: white;
		padding: 20rpx;
		position: fixed;
		left: 0;
		width: 100vw;

		.btn {
			padding: 20rpx 0rpx;
			color: white;
			font-weight: 600;
			justify-content: center;
			border-radius: 60rpx;
			background-color: #f9613e;
		}
	}
</style>